<template>
  <div>
    <h1>修改私教课程</h1>
    <el-divider></el-divider>
    <div style="width: 500px">
      <el-form style="padding-right: 40px" ref="form" :rules="rules" :model="form" label-width="100px">
        <el-form-item label="教练名字" prop="coach_name">
          <el-input v-model="form.coach_name" disabled autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程价格" prop="course_price">
          <el-input v-model="form.course_price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上课日期" prop="course_date">
          <template>
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker
                v-model="form.course_date"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </template>
        </el-form-item>
        <el-form-item label="上课时间" prop="course_time">
          <el-time-select
            v-model="form.course_time"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
            }"
            placeholder="选择时间"
          >
          </el-time-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-left: 100px">
           <el-button @click="$router.go(-1)">取 消</el-button>
        <el-button @click="submit" type="primary">修改</el-button>
       
      </div>
    </div>
  </div>
</template>

<script>
import httpApi from "@/http";
export default {
  data() {
    return {
      form: {
        coach_name:"",
        trends_id:this.$route.params.trends_id,
        coach_id:this.$route.params.coach_id,
        course_price: "",
        course_date: "",
        course_time: "",
        ce_id: this.$route.query.ce_id,
      },
      rules:{
        coach_name:[
        {required:true, message:'必填', trigger:'blur'}
        ],
        course_price:[
        {required:true, message:'必填', trigger:'blur'}
        ],
        course_date:[
        {required:true, message:'必选', trigger:'blur'}
        ],
        course_time:[
        {required:true, message:'必选', trigger:'blur'}
        ]
      }
    };
  },
  mounted() {
    this.updateLesson();
  },
  methods: {
    /** 加载修改课程信息对话框 */
    updateLesson() {
      let ce_id = this.form.ce_id;
      // 查询私教课程信息
      console.log("课程id用于查找信息：", ce_id);
      httpApi.plessonApi.queryById({ ce_id }).then((res) => {
        console.log("id查询到的课程信息：", res);
        this.form = res.data.data[0];
      });
    },

    /** 提交修改课程信息的表单 */
    submit(){
      this.$refs.form.validate((valid)=>{
        if(valid){
          let trends_id = this.form.trends_id
      let coach_id = this.form.coach_id
      let params ={
        ce_id:this.form.ce_id ,
        course_price:this.form.course_price ,
        course_date:this.form.course_date ,
        course_time:this.form.course_time
      }
      console.log(params);
      httpApi.plessonApi.update(params).then((res)=>{
        console.log('修改课程信息啦啦啦：',res);
        if (res.data.code == 200) {
              // 修改成功
              this.$message({ type: "success", message: "成功" });
              this.$router.push(`/home/plesson-list?trends_id=${trends_id}&&coach_id=${coach_id}`);
            } else {
              this.$message({ type: "error", message: "系统异常" });
            }
      })
        }
      })
      
    }
  },
};
</script>

<style lang="scss" scoped></style>
